<template>
    <div id="show">
        <!--评论组件-->
        <!-- 评论 -->
        <div class="comment">
            <h3>提交评论</h3>
            <textarea placeholder="请输入您要评论的内容..." v-model="postContent"></textarea>
            <mt-button type="primary" size="large" @click="postComment">发表</mt-button>
        </div>
        <!--获取评论数据列表-->
        <div class="list">
            <h3>评论列表</h3>
            <div   v-for="(item,index) in list">
                <div class="title">
                    <span>第{{index+1}}楼:</span>
                    <span>用户:{{item.user_name}}</span>
                    <span>发表时间:{{item.add_time}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

    </div>
</template>

<script>
    // 获取api和toast
    import  kit from '../../kits/apikit';
    import  {Toast} from 'mint-ui';
    export default{
        //接收父组件传递过来的id 通过id分辨当前是哪一个新闻评论列表
        props:['id'],
        data(){
            return {
                //获取用户提交的评论内容
                postContent:'',
                //评论列表数据
                list:[],
                //评论列表页数
                pageindex:1
            }
        },
        created(){
            this.getCommentList(this.pageindex);
        },
        methods:{
            //获取更多评论
            getMore(){
                this.pageindex++;
                //获得当前页码对应的数据
                this.getCommentList(this.pageindex);
            },

            //获取评论数据列表
            getCommentList(pageindex){
                pageindex = pageindex || 1;
                var url = kit.apikit+'type=getcomments&artid='+this.id+'&pageindex='+pageindex;

                this.$http.get(url).then(function (response) {
                    if(response.body.status != 0){
                        Toast('获取失败');
                        return;
                    }
                    //concat 连接数组
                    this.list = this.list.concat(response.body.message);
                });
            },

            //提交评论
            postComment(){
                //判断用户是否填写了评论内容
                if(this.postContent.trim().length == 0){
                    Toast('评论内容不能为空');
                    return;
                }
                var url = kit.apikit+'type=postcomment&';
                this.$http.post(url,{artid:this.id,content:this.postContent},{emulateJSON:true}).then(function (response) {
                    if (response.body.status != 0) {
                        Toast(response.body.message);
                        return;
                    }
                    Toast('评论成功');

                    //刷新列表
                    this.getCommentList(1);
                    //添加数据到评论列表最顶部
                    var Y = new Date().getFullYear();
                    var M = new Date().getMonth()+1;
                    var D = new Date().getDate();
                    var h = new Date().getHours();
                    var m = new Date().getMinutes();
                    var s = new Date().getSeconds();
                    this.list=[{
                        "user_name":"匿名用户",
                        "user_logo":'',
                        "add_time":Y+'-'+M+'-'+D+' '+h+':'+m+':'+s,
                        "content":this.postContent
                    }].concat(this.list);
                    //清空文本框
                    this.postContent = '';
                })
            }
        }

    }
</script>

<style scoped>
    .comment{
        padding: 0 5px;
    }
    .comment h3,.list h3{
        padding-bottom: 5px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px;
        margin-top: 30px;
    }
    .title{
        background-color: #e5e5e5;
        padding: 10px;
    }
    .title span{
        font-size: 14px;
        color: #666;
    }
    .mint-button--primary{
        background-color:#ff6600;
    }
</style>
